<template>
    <div id="get_house_num"></div>
</template>
<style scoped>
#get_house_num{
  width: 100%;
  height: calc(100% - 40px);
}

</style>
<script>
import * as echarts from 'echarts';
export default {
    props: {
    },
    components:{},
    data(){
        return{}
    },
    methods:{
      get_house_num(listDate, listCount0, listCount1){
        // listCount0 未出租  listCount1 已出租
        console.log("house father", listDate, listCount0, listCount1)

        var chartDom = document.getElementById('get_house_num');
        var myChart = echarts.init(chartDom);
        var option;
        var option = {
        backgroundColor:'#fff',
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '2%',
              right: '4%',
              bottom: '14%',
              top:'16%',
              containLabel: true
            },
            legend: {
            data: ['已出租', '未出租'],
            right: 10,
            top:12,
            textStyle: {
                color: "#000"
            },
            itemWidth: 12,
            itemHeight: 10,
            // itemGap: 35
        },
            xAxis: {
              type: 'category',
              data: listDate,
              axisLine: {
                lineStyle: {
                  color: '#000'

                }
              },
              axisLabel: {
                // interval: 0,
                // rotate: 40,
                textStyle: {
                  fontFamily: 'Microsoft YaHei'
                }
              },
            },

            yAxis: {
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#000'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#eee'
                }
              },
              axisLabel: {}
            },
            series: [{
              name: '已出租',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fccb05'
                    }, {
                        offset: 1,
                        color: '#f5804d'
                    }]),
                    barBorderRadius: 12,
                },
              },
              data: listCount1
            },
            {
              name: '未出租',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#8bd46e'
                    }, {
                        offset: 1,
                        color: '#09bcb7'
                    }]),
                    barBorderRadius: 11,
                }
                
              },
              data: listCount0
            }]
          };
          option && myChart.setOption(option);
      }
    },
    created(){},
    mounted(){
      this.get_house_num()
    },
}
</script>